Intro

A simple SaaS app framework with collapsible sidebar

A classic SaaS app with header, sidebar and main content area. Sidebar is shown or hidden based on a given width threshold and the window width, and can be toggled open or closed using the hamburger menu in the top left of the header.

Demo

Simple SaaS App Framework

Drop your content into the component and it will show up here.

This placeholder text should demonstrate scrolling behaviour.

Suspendisse eget luctus elit, varius venenatis ipsum. Quisque venenatis purus ac ultrices facilisis. Donec non nisl libero. Mauris eu leo vel orci laoreet vehicula. Nunc pulvinar nunc id lectus tincidunt suscipit. Fusce nec sapien ligula. Sed nisi urna, mattis ut facilisis sit amet, gravida ac nunc. Ut non pharetra massa, non aliquet nibh. Maecenas vehicula, eros at consectetur sollicitudin, justo orci dapibus lacus, in sollicitudin est leo non quam.

Fusce at risus ex. In pulvinar tellus quis nibh facilisis tincidunt. Nunc et nisl ipsum. Fusce sed mauris in arcu iaculis imperdiet vitae id orci. Integer imperdiet facilisis aliquam. Praesent feugiat vehicula neque ac commodo. Quisque tincidunt neque augue, id pulvinar nibh venenatis porttitor. Mauris sagittis justo non elit tristique placerat. Maecenas in nulla vel dolor lobortis pharetra. Mauris pulvinar tincidunt neque, sagittis dapibus erat dapibus eget. Pellentesque id imperdiet felis. Etiam in quam tellus. In condimentum velit sed augue euismod interdum.

Suspendisse eget luctus elit, varius venenatis ipsum. Quisque venenatis purus ac ultrices facilisis. Donec non nisl libero. Mauris eu leo vel orci laoreet vehicula. Nunc pulvinar nunc id lectus tincidunt suscipit. Fusce nec sapien ligula. Sed nisi urna, mattis ut facilisis sit amet, gravida ac nunc. Ut non pharetra massa, non aliquet nibh. Maecenas vehicula, eros at consectetur sollicitudin, justo orci dapibus lacus, in sollicitudin est leo non quam.

Fusce at risus ex. In pulvinar tellus quis nibh facilisis tincidunt. Nunc et nisl ipsum. Fusce sed mauris in arcu iaculis imperdiet vitae id orci. Integer imperdiet facilisis aliquam. Praesent feugiat vehicula neque ac commodo. Quisque tincidunt neque augue, id pulvinar nibh venenatis porttitor. Mauris sagittis justo non elit tristique placerat. Maecenas in nulla vel dolor lobortis pharetra. Mauris pulvinar tincidunt neque, sagittis dapibus erat dapibus eget. Pellentesque id imperdiet felis. Etiam in quam tellus. In condimentum velit sed augue euismod interdum.

Components

  • framework 01

    Slots

    default
    Main content area. Drop a div in here, set the width and height to 100% and then style colours etc.
    header
    Header content. Drop a div in here and set the size to flex: 1 so it fills the width of the header area. The hamburger menu is fixed. Use the header_bg_colour to set the background colour of the whole header.
    sidebar
    Sidebar content. I like dropping a div, setting the height to 100%, padding 1rem, and justify-content: space-between. Then 2 divs inside show up at the top and bottom of the sidebar.

    Attributes

    sidebar_width
    The width of your sidebar (rem)
    threshold_width
    The width of the viewport under which the sidebar will be hidden. (px)
    header_bg_colour
    Header background colour.

Notes

  • Notes

    I'm not sure this package is 100% toddle-correct (toddly?) so please feel free to let me know where I can improve things. As I make updates I will note them below.

    Releases

    2024-12-12
    First release. I'm actually using this in one of my own apps.